<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>售水机</title>
		<meta name="keywords"  content="KEYWORDS..." />
		<meta name="description" content="DESCRIPTION..." />
		<meta name="author" content="DeathGhost" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name='apple-touch-fullscreen' content='yes'>
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<meta name="format-detection" content="address=no">
		<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="../css/style.css"/>
		<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.none{display:none;}
		</style>
	</head>
	<body style="background:#f6f6f6;">
		<div class="content">
			<header class="page-header1">
				<a href="../index.html"><img src="../img/icon_left.png" class="back_img" style="float:left;"/></a>
				<h3>卡片管理</h3>
			</header>
			<div class="card_management">
				<div class="query">查询 <img src="../img/icon_bottom.png" style="width:4%;"/></div>
			</div>
			<div class="card_summary">
				<div class="card_total">卡片列表（总用户数：<span class="list_num">4</span>）</div>
				<div class="card_classification">
					<div class="total_number">总用户数</div>
					<div class="total_num"><span class="list_num">4</span></div>
					<div class="total_list">
						<div class="total_lists">
							<div class="total_real_name">实名用户</div>
							<div class="total_real_num">1</div>
						</div>
						
						<div class="total_lists">
							<div class="total_real_name">未实名用户</div>
							<div class="total_real_num">3</div>
						</div>
						
						<div class="total_lists">
							<div class="total_real_name">发卡失败用户</div>
							<div class="total_real_num">0</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="total_state">
				<div class="total_state_list">
					<div class="total_state_list_top">
						<div class="total_state_list_top_serial">NO. 5B95C53C<span class="state">(正常)</span></div>
						<div class="total_state_list_top_amount">余额：120.00</div>
					</div>
					<div class="total_state_list_centen">
						<div class="total_state_list_centen_serial"><span class="total_time">2018.6.8</span><span class="total_id">最近消费机器ID：1453</span></div>
						<div class="total_state_list_centen_btn">
							<button class="btn_loss">挂失</button>
							<button class="btn_refresh none">刷新</button>
							<button class="btn_remove none">解除挂失</button>
							<button class="btn_fill none">补卡</button>
							<button class="btn_refreshs none">刷新</button>
						</div>
					</div>
				</div>
				
				<div class="total_state_list">
					<div class="total_state_list_top">
						<div class="total_state_list_top_serial">NO. 5B95C53C<span class="state">(正常)</span></div>
						<div class="total_state_list_top_amount">余额：120.00</div>
					</div>
					<div class="total_state_list_centen">
						<div class="total_state_list_centen_serial"><span class="total_time">2018.6.8</span><span class="total_id">最近消费机器ID：1453</span></div>
						<div class="total_state_list_centen_btn">
							<button class="btn_loss">挂失</button>
							<button class="btn_refresh none">刷新</button>
							<button class="btn_remove none">解除挂失</button>
							<button class="btn_fill none">补卡</button>
							<button class="btn_refreshs none">刷新</button>
						</div>
					</div>
					
					<div class="total_state_list_bottom">
						<span class="s_real_name">已实名</span>
						<span class="s_name">姓名：张三</span>
						<span class="s_phone">电话：18369388888</span>
						<span class="s_nickname">昵称：幸福的小白</span>
					</div>
				</div>
			</div>
			<div style="clear: both;"></div>
		</div>
		<!--弹框-->
		<div class="pop-panel2">
			<div class="details">
				<div class="query_list">
					<div class="query_lists">
						<div class="query_lists_left query_card_number">卡号</div>
						<div class="query_lists_right query_card_number_inp">
							<input type="text" name="query_card_number_inps" value="" placeholder="请输入卡号" class="query_card_number_inps"/>
						</div>
					</div>
					
					<div class="query_lists">
						<div class="query_lists_left query_card_name">姓名</div>
						<div class="query_lists_right query_card_name_inp">
							<input type="text" name="query_card_name_inps" value="" placeholder="请输入姓名" class="query_card_name_inps"/>
						</div>
					</div>
					
					<div class="query_lists">
						<div class="query_lists_left query_card_phone">电话</div>
						<div class="query_lists_right query_card_phone_inp">
							<input type="text" name="query_card_phone_inps" value="" placeholder="请输入电话" class="query_card_phone_inps"/>
						</div>
					</div>
					
					<div class="query_lists">
						<div class="query_lists_left query_card_big">余额</div>
						<div class="query_lists_right query_card_big_inp">
							<input type="text" name="query_card_big_inps" value="" placeholder="大于等于" class="query_card_big_inps"/>
						</div>
					</div>
					
					<div class="query_lists">
						<div class="query_lists_left query_card_small">余额</div>
						<div class="query_lists_right query_card_small_inp">
							<input type="text" name="query_card_small_inps" value="" placeholder="小于等于" class="query_card_small_inps"/>
						</div>
					</div>
				</div>
				<div class="query_btn">
					<div class="query_btns">
						<div class="query_btn_cancel">
							<button class="btn_cancel">取消</button>
						</div>
						<div class="query_btn_confirm">
							<button type="button" class="btn_confirm">查询</button>
						</div>
					</div>
				</div>
			</div>
			<div class="bg"></div>
		</div>
	</body>
	<!--改变状态和按钮-->
	<script type="text/javascript">
		$(function(){
			$('.btn_loss').click(function(){
				$('.btn_refresh').removeClass('none');
				$('.btn_loss').addClass('none');
				$('.state').html('(挂失中)');
			});
			$('.btn_refresh').click(function(){
				$('.btn_remove').removeClass('none');
				$('.btn_fill').removeClass('none');
				$('.btn_refresh').addClass('none');
				$('.state').html('(已挂失)');
			});
			$('.btn_remove').click(function(){
				$('.btn_refreshs').removeClass('none');
				$('.btn_fill').addClass('none');
				$('.btn_remove').addClass('none');
				$('.state').html('(解除挂失中)');
			});
			$('.btn_refreshs').click(function(){
				$('.btn_loss').removeClass('none');
				$('.btn_fill').addClass('none');
				$('.btn_refreshs').addClass('none');
				$('.state').html('(正常)');
			});
		});
	</script>
	<!--点击查询出现弹框-->
	<script type="text/javascript">
		$('.card_management').on('click',function(e){
		    $('.pop-panel2').show();
		    e.stopPropagation();
		})
		$('.query_btn_cancel').on('click',function(){
		    $('.pop-panel2').hide();
		})
	</script>
</html>
